<!-- SidebarMenu.vue -->
<template>
  <el-menu default-active="popover" @select="handleSelect" @open="handleOpen" @close="handleClose">
    <template v-for="(item, index) in menuItems" :key="index">
      <el-sub-menu v-if="item.children && item.children.length" :index="item.name">
        <template #title>
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="child in item.children" :key="child.name" :index="child.name">
          <el-icon>
            <component :is="child.icon" />
          </el-icon>
          {{ child.title }}
        </el-menu-item>
      </el-sub-menu>

      <!-- 普通菜单项 -->
      <el-menu-item v-else :index="item.name">
        <el-icon>
          <component :is="item.icon" />
        </el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>

  </el-menu>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';
import {
  HomeFilled, ElementPlus, Histogram, QuestionFilled, Expand, Document
} from '@element-plus/icons-vue';

const emit = defineEmits(['menu-select']);

// 菜单数据，支持多级嵌套
const menuItems = [
  {
    name: 'ElementPlus',
    title: 'Element Plus',
    icon: ElementPlus,
    children: [
      {
        name: 'input-number',
        title: 'input-number',
        icon: QuestionFilled,
        path: '../views/InputNumber.vue'
      },
      {
        name: 'popover',
        title: 'Popover',
        icon: QuestionFilled,
        path: '../views/drawer/ResizableDrawer.vue'
      }
    ]
  },
  {
    name: 'Dashboard',
    title: 'Collapse',
    icon: Expand,
    path: '../views/collapse.vue'
  },
  {
    name: 'UserManagement',
    title: 'ECharts',
    icon: Histogram,
    children: [
      {
        name: 'LiquidFillChart',
        title: '液体球',
        icon: QuestionFilled,
        path: '../views/LiquidFillChart.vue'
      },

    ]
  },
  {
    name: 'Markdown-It',
    title: 'Markdown-It',
    icon: Document,
    path: '../views/Markdown.vue'
  },
  {
    name: 'Scroll',
    title: 'Scroll',
    icon: Document,
    path: '../views/Scroll.vue'
  },
  {
    name: 'NewCollapse',
    title: 'NewCollapse',
    icon: Document,
    path: '../views/NewCollapse.vue'
  },
  {
    name: 'FlaskSSE',
    title: 'Flask SSE',
    path: '../views/FlaskSSE.vue'
  },
  {
    name: 'ImageShow',
    title: 'Image Show',
    path: '../views/ImageShow.vue'
  }
];

const handleSelect = (index) => {
  const selectedItem = findMenuItem(menuItems, index);
  if (selectedItem) {
    emit('menu-select', selectedItem);
  }
};

function findMenuItem(items, name) {
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    if (item.name === name) {
      return item;
    }
    if (item.children) {
      const found = findMenuItem(item.children, name);
      if (found) {
        return found;
      }
    }
  }
  return null;
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>